<template>
  <view class="index-page">
    <u-navbar
      z-index="999"
      :is-back="false"
      :background="{ background: 'transparent' }"
      :border-bottom="false"
    >
      <view class="navabar-costome">
        <image class="avatar" src="/static/images/avatar.png" />
        <view class="inner-title">订货端</view>
      </view>
    </u-navbar>
    <view class="content">
      <view class="tabs">
        <view
          :class="{ 'tab-item-active': activeTab == index, 'tab-item': true }"
          @click="handleTabClick(index)"
          v-for="(item, index) in tab"
          :key="index"
        >
          {{ item.title }}
        </view>
      </view>
      <view class="content-body">
        <view :class="{ 'sub-tabs': true, 'show-all-sub-tabs': showMore }">
          <view
            :class="{
              'sub-tabs-item-active': subTabsCurrent == index,
              'sub-tabs-item': true
            }"
            v-for="(item, index) in subTabs"
            :key="item.title"
            @click="handleSubTabClick(index)"
          >
            {{ item.title }}
          </view>
          <view
            :class="{ 'show-more': true, 'show-more-active': showMore }"
            @click="showMore = !showMore"
          >
          </view>
        </view>
        <view class="panel">
          <view class="search" @click="handleSearch">
            搜索
            <view class="search-icon"> </view>
          </view>
          <view class="sort">
            销量
            <view>
              <view
                :class="{ 'sort-icon-up': true, 'srot-active': sortCurrent }"
              >
              </view>
              <view
                :class="{ 'sort-icon-down': true, 'srot-active': sortCurrent }"
              >
              </view>
            </view>
          </view>
          <view class="sort">
            价格
            <view>
              <view
                :class="{ 'sort-icon-up': true, 'srot-active': sortCurrent }"
              >
              </view>
              <view
                :class="{ 'sort-icon-down': true, 'srot-active': sortCurrent }"
              >
              </view>
            </view>
          </view>
        </view>
        <view class="product-list">
          <scroll-view :scroll-x="false" scroll-y style="height: 100%">
            <ProductItem v-for="item in list" :key="item.id" :data="item" />
          </scroll-view>
        </view>
      </view>
    </view>
    <view class="bottom-bar">
      <view>
        <text>已选</text>
        <text class="count"></text>
        <text>个商品</text>
      </view>
      <view>
        <text>合计：</text>
        <text class="price">￥</text>
        <text class="price size-32">{{ price }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import ProductItem from '@/components/ProductItem.vue'

const tab = [
  { title: '商品' },
  { title: '分类' },
  { title: '品牌' },
  { title: '供应商' },
  { title: '采购单' },
  { title: '采购单' },
  { title: '商品' },
  { title: '分类' },
  { title: '品牌' },
  { title: '供应商' },
  { title: '采购单' },
  { title: '采购单' },
  { title: '采购单' },
  { title: '采购单' }
]
const subTabs = [
  { title: '全部' },
  { title: '待审核' },
  { title: '待审核' },
  { title: '全部' },
  { title: '待审核' },
  { title: '待审核' }
]
const showMore = ref(false)
const list = ref([
  { title: '商品商品商品商品商品商品商品商品商品商品商品商品商品商品商品商品商品商品商品商品', id: 1 },
  { title: '商品', id: 1 },
  { title: '商品', id: 1 },
  { title: '商品', id: 1 },
  { title: '商品', id: 1 },
  { title: '商品', id: 1 },
  { title: '商品', id: 1 },
  { title: '商品', id: 1 },
  { title: '商品', id: 1 }
])
const handleTabClick = (index) => {
  activeTab.value = index
}
const handleSubTabClick = (index) => {
  subTabsCurrent.value = index
}
const handleSearch = () => {
  uni.navigateTo({
    url: '/pages/search/index'
  })
}
const activeTab = ref(0)
const subTabsCurrent = ref(0)
</script>

<style lang="scss" scoped>
.index-page {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  background: url('https://prod-ylzapp-public.oss-cn-zhangjiakou.aliyuncs.com/freshx/wxapp/bg.jpg')
    no-repeat left top;
  background-size: 100% 328rpx;
  overflow: hidden;
}
.navabar-costome {
  position: relative;
  width: 100%;
  height: 100%;
  .inner-title {
    position: absolute;
    top: 0;
    left: 50%;
    font-size: 34rpx;
    color: #1c2026;
  }
  .avatar {
    width: 64rpx;
    height: 64rpx;
    margin-left: 24rpx;
  }
}
.content {
  flex: 1;
  display: flex;
  flex-shrink: 0;
  overflow: hidden;
  .content-body {
    width: 558rpx;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
  }
  .tabs {
    width: 192rpx;
    height: 100%;
    flex-shrink: 0;
    background: #f4f5f7;
    border-radius: 0 20rpx 0 0;
    overflow-y: auto;
    .tab-item {
      width: 100%;
      height: 96rpx;
      line-height: 96rpx;
      text-align: center;
      font-size: 24rpx;
      color: #262626;
    }
    .tab-item-active {
      background-color: #fff;
      color: #04b27c;
      position: relative;
      border-radius: 0 20rpx 0 0;
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 32rpx;
        width: 8rpx;
        height: 32rpx;
        background-color: #04b27c;
        border-radius: 4rpx;
      }
    }
  }
  .sub-tabs {
    display: flex;
    flex-shrink: 0;
    width: 510rpx;
    align-items: center;
    overflow-x: auto;
    white-space: nowrap;
    flex-wrap: nowrap;
    .sub-tabs-item {
      font-size: 24rpx;
      color: #585858;
      background-color: #f4f5f7;
      border-radius: 8rpx;
      margin-left: 16rpx;
      padding: 4rpx 16rpx;
      font-weight: 400;
    }
    .sub-tabs-item-active {
      color: #04b27c;
      background-color: #e6f7f2;
      border: 2rpx solid #04b27c99;
      font-weight: 600;
    }
    .show-more {
      position: absolute;
      right: 0;
      width: 48rpx;
      height: 48rpx;
      background: url('/static/images/down.svg') no-repeat center center;
      background-size: 32rpx 32rpx;
      transition: transform 0.3s;
    }
    .show-more-active {
      transform: rotate(180deg);
    }
  }
  .show-all-sub-tabs {
    flex-wrap: wrap;
    .sub-tabs-item {
      margin-bottom: 16rpx;
    }
  }
  .panel {
    display: flex;
    align-items: center;
    width: 100%;
    height: 80rpx;
    padding: 16rpx;
    .search {
      flex: 1;
      display: flex;
      align-items: center;
      color: #8a8a8a;
      font-size: 28rpx;
    }
    .search-icon {
      width: 26rpx;
      height: 26rpx;
      margin-left: 3rpx;
      background: url('/static/images/search.svg') no-repeat center center;
      background-size: 26rpx 26rpx;
    }
    .sort {
      display: flex;
      align-items: center;
      color: #262626;
      font-size: 28rpx;
      margin-left: 48rpx;
      .sort-icon-up {
        width: 32rpx;
        height: 16rpx;
        background: url('/static/images/up.svg') no-repeat bottom center;
        background-size: 12rpx 8rpx;
      }
      .sort-icon-down {
        width: 32rpx;
        height: 16rpx;
        background: url('/static/images/down-1.svg') no-repeat top center;
        background-size: 12rpx 8rpx;
      }
      .srot-active {
        filter: opacity(0.6);
      }
    }
  }
  .product-list {
    padding: 0 16rpx;
    width: 558rpx;
    box-sizing: border-box;
    flex: 1;
    overflow: hidden;
  }
}
.bottom-bar {
  display: flex;
  justify-content: space-between;
  height: 92rpx;
  border-radius: 32rpx 36rpx 0 0;
  align-items: center;
  padding: 32rpx;
  box-shadow: 0px -1px 8rpx 0px #8989891a;
  background-color: #fff;
  color: #585858;
  font-size: 28rpx;
  .count {
    font-weight: blod;
    font-size: 32rpx;
    color: #262626;
    padding: 0 4rpx;
  }
  .price {
    color: #e8424a;
    font-weight: blod;
  }
  .size-32 {
    font-size: 32rpx;
  }
}
</style>
